<template>
	<view class="step1">
		<scroll-view scroll-x class="scroll">
			<view class="massif df">
				<view v-for="(v,i) in areaList" :key="i" class="vfor" :class="areaIndex == v.baseId ? 'active' : ''" @click="handleAreaSelect(v)">
					<view class="tips df">
						<view class="successTip" v-show="v.state == 1">
							<view class="icon"></view>
						</view>
						<view class="errorTip"  v-show="v.state == 0">
							<view class="icon"></view>
						</view>
					</view>
					<view class="name">{{v.name}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom" v-if="list && list.length">
			<view class="tt df">
				<view class="tt-left">地块</view>
				<view class="tt-mid">地块状态</view>
				<view class="tt-right" @click="stepUp">下一步</view>
			</view>
			<view class="df list">
				<view class="list-left">
					<view class="indexList">
						<view class="block" ref="block" id="block" :style="{top:blockTop+'px'}"></view>
						<view v-for="(item,index) in indexList" :key="index">
							<view class="button" :class="index == currentArea ? 'active':''" @click="localTheArea(item,index,$event)">{{item.name}}</view>
						</view>
					</view>
				</view>
				<view class="list-right">
					<!-- #ifdef MP-WEIXIN -->
					<scroll-view style="height: 1000rpx;scroll-behavior: smooth;" scroll-y :scroll-into-view="scrollId" scroll-with-animation>
						<view v-for="(v,i) in list" :key="i" class="vfor df" :id="'d'+v.landId">
							<view class="vfor-left">
								<image :src="v.landPicUrl" mode="aspectFit" class="vfor-left"></image>
							</view>
							<view class="vfor-right">
								<view class="vfor-title">{{v.name}}</view>
								<view class="text">{{v.totalArea+'平方'}}</view>
								<view class="type" :class="v.leaseState == 1 ? '' : 'activeType'">
									{{v.leaseState == 1 ? '可租赁' : '已租赁'}}
								</view>
							</view>
							<view class="left-poa" v-if="v.leaseState == 1" @click="itemClick(v)">
								<checkbox-group>
									<label>
										<checkbox :checked="v.checked" color="#17CC77"/>
									</label>
								</checkbox-group>
								<!-- <image src="@/static/active.png" mode=""></image> -->
							</view>
						</view>
					</scroll-view>
					<!-- #endif -->
					
					<!-- #ifdef H5 -->
						<view v-for="(v,i) in list" :key="i" class="vfor df" :id="'d'+v.landId">
							<view class="vfor-left">
								<image src="@/static/indexBg.png" mode="" class="vfor-left"></image>
							</view>
							<view class="vfor-right">
								<view class="vfor-title">{{v.name}}</view>
								<view class="text">{{v.totalArea+'平方'}}</view>
								<view class="type" :class="v.leaseState == 1 ? '' : 'activeType'">
									{{v.leaseState == 1 ? '可租赁' : '已租赁'}}
								</view>
							</view>
							<view class="left-poa" v-if="v.leaseState == 1" @click="itemClick(v)">
								<checkbox-group>
									<label>
										<checkbox :checked="v.checked" color="#17CC77"/>
									</label>
								</checkbox-group>
								<!-- <image src="@/static/active.png" mode="" v-if="v.check"></image> -->
							</view>
						</view>
					<!-- #endif -->
				</view>
			</view>
		</view>
		<view v-else>
			<u--text  bold align="center" type="info" text="该地没有地块可以认养"></u--text>
		</view>
	</view>
</template>

<script>
	import { findAllBase,findLandByBaseId } from "@/api/api.js"
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				checkedArr:[],
				scrollId:'',
				blockTop:'',
				areaIndex: '',
				areaList: [],
				list: [],
				currentArea:0,
				indexList:[],
				curBaseId:'',
			}
		},
		mounted() {
			this.findAllBase();
		},
		computed:{
			
		},
		methods: {
			...mapMutations(['setContractInfo']),
			//获取认养地
			async findAllBase(){
				const res = await findAllBase()
					let data = res.data.data
					this.areaList = data
					this.areaIndex = this.areaList[0].baseId
					this.findLandByBaseId(this.areaIndex)
			},
			//获取地块信息byId
			async findLandByBaseId(id){
				const res = await findLandByBaseId(id)
				if(res?.data.code == 200){
					let data = res.data.data
					this.indexList = data
					this.list = data
				}
			},
			itemClick(item){
				item.checked = !item.checked
				item.key = "details"
				console.log(this.areaIndex);
				item.baseId = this.areaIndex
				item.plantArea = item.totalArea
				if(item.checked){
					this.checkedArr.push(item)
				}else{
					this.checkedArr.forEach((jack,index)=>{
						if(jack.landId == item.landId){
							this.checkedArr.splice(index,1)
						}
					})
				}
			},
			stepUp() {
				if(this.checkedArr.length<1){
					uni.showToast({
						icon:"error",
						mask:true,
						title:'您还没有选择地块'
					})
					return
				}
				this.setContractInfo(this.checkedArr)
				this.$emit('step', {index:1,details:this.checkedArr})
			},
			handleAreaSelect(area){
				this.areaIndex = area.baseId
				this.findLandByBaseId(area.baseId);
			},
			localTheArea(item,index,event){
				console.log('2222',item);
				this.currentArea = index
				let currEl = event.target
				let top = currEl.offsetTop
				this.scrollId = 'd'+item.landId
				
				// #ifdef MP-WEIXIN
					const query = uni.createSelectorQuery().in(this)
					query.select('#block').boundingClientRect(data=>{
						this.blockTop = top
					}).exec()
				// #endif
				
				// #ifdef H5
					this.$refs.block.$el.style.top = top+"px"
					this.$el.querySelector("#"+'d'+item.landId).scrollIntoView()
				// #endif
				
			},
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.uni-checkbox-input:hover{
		// background-color: red;
		border-color: unset !important;
	}
	.indexList{
		width: 140rpx;
		height: 1000rpx;
		overflow: auto;
		padding-right: 10rpx;
		position: relative;
		.button{
			overflow: hidden;
			height: 70rpx;
			font-size: 25rpx;
			line-height: 70rpx;
			text-align:center;
			font-weight: 400;
			padding: 20rpx 0;
			transition: 0.3s;
		}
		.active{
			color: #17CC77;
		}
		.block{
			position: absolute;
			top:0;
			width: 140rpx;
			height: 100rpx;
			opacity: .1;
			border-radius: 10rpx;
			transition: 0.3s;
			background-color: #1af089;
		}
	}
	.step1 {

		.df {
			display: flex;
		}

		.scroll {
			width: 670rpx;
			height: 202rpx;
			padding: 44rpx 40rpx 30rpx;
			background-color: #fff;
			box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0, 0, 0, 0.12);
			border-radius: 0rpx 0rpx 36rpx 36rpx;
			margin-bottom: 30rpx;

			.massif {
				width: 670rpx;
				height: 142rpx;
				margin-top: 10rpx;
				// overflow: hidden;

				.vfor {
					// width: 2000rpx;
					height: 182rpx;
					background: #F6F8FB;
					border-radius: 10rpx;
					margin-right: 22rpx;
					box-sizing: border-box;
					padding: 30rpx;
					position: relative;
					.tips {
						width: 100%;
						position: absolute;
						top: -8rpx;
						right: -40rpx;

						.successTip {
							// width: 50%;

							.icon {
								float: right;
								width: 14rpx;
								height: 14rpx;
								border-radius: 50%;
								margin-right: 4rpx;
								background-color: #17CC77;
								border: 4rpx solid #fff;
							}

						}

						.errorTip {
							.icon {
								width: 14rpx;
								height: 14rpx;
								border-radius: 50%;
								margin-right: 4rpx;
								background-color: #FA680A;
								border: 4rpx solid #fff;
							}
						}
					}

					.name {
						width: 44rpx;
						height: 100%;
						overflow: hidden;
						text-align: center;
						font-size: 30rpx;
						writing-mode: vertical-lr;
					}
				}

				.active {
					background: #17CC77;
					border-radius: 10rpx;
					color: #fff;
				}
			}
		}

		.bottom {
			padding: 30rpx;
			padding-top: 0;
			.tt {
				height: 68rpx;
				margin-bottom: 30rpx;
				font-size: 32rpx;
				color: #282828;
				justify-content: space-between;

				.tt-left {
					width: 200rpx;
					line-height: 68rpx;
					text-align: center;
				}

				.tt-mid {
					// margin-left: 60rpx;
					line-height: 68rpx;
					// margin-right: 160rpx;
				}

				.tt-right {
					width: 168rpx;
					height: 68rpx;
					background: rgba(27, 196, 109, 0.1);
					border-radius: 34rpx;
					border: 2rpx solid #1BC46D;
					text-align: center;
					line-height: 68rpx;
					color: #1BC46D;
				}
			}

			.list {
				.list-right {
					scroll-behavior: smooth;
					padding-left: 8rpx;
					border-left: 2rpx solid #cecece;
					height: 1000rpx;
					overflow: auto;
					.vfor {
						width: 485rpx;
						height: 232rpx;
						padding: 20rpx;
						background-color: #fff;
						border-radius: 10rpx;
						position: relative;
						margin-bottom: 20rpx;

						.vfor-left {
							margin-right: 20rpx;
							width: 232rpx;
							height: 232rpx;
						}

						.vfor-right {
							margin-top: 34rpx;
							.vfor-title {
								color: #17CC77;
								font-size: 30rpx;
							}

							.text {
								font-size: 30rpx;
								color: #878787;
								margin-bottom: 15rpx;
							}

							.type {
								font-size: 30rpx;
								color: #17CC77;
							}

							.activeType {
								color: #FA680A;
							}

						}

						.left-poa {
							position: absolute;
							top: 50%;
							right: 20rpx;
							margin-top: -22rpx;
							background: rgba(23, 204, 119, 0.06);
							border-radius: 8rpx;
							// border: 2rpx solid #17CC77;
							overflow: hidden;

							image {
								margin-top: -2rpx;
								margin-left: -2rpx;
								width: 44rpx;
								height: 44rpx;
							}
						}
					}
				}
			}

		}

	}
</style>